@charset "utf-8";
@import 'block/common.scss';
$basefontsize:.3rem;
$basefontcolor:#333333;

/**
 * 手机版页面所有css
 * 引入文件 _reset.scss
 **/

.wrap {
  width: 10.8rem;
  margin: 0 auto;
  @extend %clf;
}

html, body {
  font-size: .36rem;
  max-width: 700px;
  height: 100%;
}


/** 
 * 组件rest
 */

.cl-input {
  background: #fff;
  border-radius: .1rem;
  padding-left: .5rem;
  @include wah(9.8rem, 1.27rem, none);
  @include flc(.38rem, 1.27rem, #333333, left);
}

.cl-btn {
  background: #F75620;
  border-radius: .1rem;
  @include wah(9.8rem, 1.27rem, none);
  @include flc(.48rem, 1.27rem, #fff, center);
  font-weight: bold;
  margin: 0 auto;
}

#header {
  height: 1.34rem;
  position: relative;
  background: #fff;
  h1 {
    @include flc(.48rem, 1.34rem, #333333, center);
  }
  .goback {
    @extend %palt;
    @include wah(.5rem, 1.34rem, none);
    background: url('../images/ppr_c_arrow.png') .2rem center no-repeat;
    background-size: .31rem auto;
  }
  .signOut {
    @extend %part;
    @include wah(2rem, 1.34rem, none);
    @include flc(.48rem, 1.34rem, none, center);
  }
}


/**
 * 带表单类通用样式
 * signIn-----       登录页面
 * signUp-----       注册页面
 * resetPass-----    重置密码页面
 * userInfo-----     个人信息修改页面
 */

#view_signIn, #view_signUp, #view_resetPass {
  background: #EBEBEB;
  .sec1 {
    .hd {
      @include wah(7.08rem, 1.1rem, none);
      margin: 0 auto;
      padding: .53rem 0;
      .tabmenu {
        @include wah(3.54rem, 1.1rem, none);
        float: left;
        @include flc(.36rem, 1.1rem, #575757, center);
        background: #fff;
        &.on {
          background: #14B6D8;
          color: #fff;
        }
        &.tabmenu-password {
          border-radius: .51rem 0 0 .51rem;
        }
        &.tabmenu-code {
          border-radius: 0 0.51rem 0.51rem 0;
        }
      }
    }
    .bd {
      .line {
        position: relative;
        padding: 0 0.5rem .4rem .5rem;
        text-align: left;
        a {
          color: #F75620;
        }
      }
      .line-reset, .line-signup {
        padding: .4rem 0 .6rem 0;
        text-align: center;
      }
      .line-code {
        text-align: left;
        .input-code {
          width: 6.31rem;
        }
        .btn-getcode {
          right: .5rem;
          background: #A09F9F;
          border-radius: .2rem;
          @extend %part;
          @include wah(3.18rem, 1.25rem, none);
          @include flc(.32rem, 1.25rem, #fff, center);
        }
      }
      .form2 {
        display: none;
      }
    }
  }
}

#view_signUp, #view_resetPass {
  .sec1 {
    .bd {
      padding-top: .7rem;
      .line-submit {
        padding-top: 1rem;
      }
    }
  }
}

#view_userInfo {
  background: #EBEBEB;
  .sec1 {
    .pic {
      background: #EBEBEB;
      padding: .6rem 0;
      .pic-wrap {
        text-align: center;
        margin: 0 auto;
        overflow: hidden;
        &, img {
          border-radius: 50%;
          @include wah(1.95rem, 1.95rem, none);
        }
      }
    }
  }
  .sec2 {
    .line {
      background: #fff;
      @include wah(10.8rem, 1.5rem, none);
      @include flc(.36rem, 1.5rem, none, center);
      margin-bottom: .2rem;
      position: relative;
      .item {
        float: left;
        color: #999999;
        padding-left: .45rem;
      }
      .text {
        float: right;
        padding-right: .45rem;
      }
      .cl-input {
        @extend %part;
        top: .1rem;
        width: 8rem;
        display: none;
      }
    }
    .line-submit {
      background: none;
      .cl-btn {
        width: 4rem;
        background: #13B5D7;
      }
    }
  }
}


/**
 * home------------   用户主页面
 */

#view_home {
  background: url('../images/ppr_home_bg1.jpg')#1E1F4F center top no-repeat;
  background-size: 100% auto;
  background-attachment: fixed;
  height: 100%;
  overflow: hidden;
  /*--------会议材料和会议咨询弹出框的自定义样式------*/
  .detail-layer {
    background: none;
    opacity: .3;
    width: 100%;
    height: 100%;
    .layui-layer-title {
      display: none;
      margin-top: 10%;
    }
    .layui-layer-content {
      overflow: hidden;
      width: 95%;
      margin: 0 auto;
    }
    .layui-layer-setwin .layui-layer-close2 {
      top: 50px;
      right: 0px;
      background: url('../images/ppr_home_bg7.png') center center no-repeat;
      background-size: 100%;
    }
    .layui-layer-content {
      .detail-wrap {
        margin-top: 2rem;
        background: rgba(0, 0, 0, .8);
        border-radius: .3rem;
        padding-bottom: 1rem;
        padding-top: 2rem;
      }
      .detail {
        height: 12rem;
        overflow: scroll;
        overflow-x: hidden;
      }
      h1 {
        @include flc(.8rem, 2, #fff, center);
        margin-bottom: .9rem;
      }
      .time {
        @include flc(.48rem, 1.5, #fff, center);
        margin-bottom: .9rem;
      }
      .content {
        padding: 0 .5rem;
        @include flc(.36rem, 1.5, #fff, left);
      }
    }
  }
}

#view_home .sec1 {
  .hd-lv1, .hd-lv2 {
    display: flex;
    flex-flow: nowrap;
    justify-content: space-around;
    padding: .7rem .2rem .4rem .2rem;
  }
  .menu-lv1 {
    flex: 0 1 2.43rem;
    background: #fff;
    border-radius: .2rem;
    height: .98rem;
    @include flc(.36rem, .98rem, #333333, center);
    &.on {
      background: #F5551F;
      @include flc(.36rem, .98rem, #fff, center);
    }
  }
  .hd-lv2 {
    justify-content: center;
  }
  .menu-lv2 {
    flex: 0 1 2.34rem;
    background: #76777A;
    border-radius: .2rem;
    height: .98rem;
    margin: 0 .1rem;
    @include flc(.36rem, .98rem, #fff, center);
    &.on {
      background: #38C2DF;
    }
  }
  .bd {
    &, .tab-lv1 {
      @include wah(9.82rem, 11.36rem, none);
    }
    margin: 0 auto;
    background-color: rgba(0, 0, 0, .3);
    border-radius: .3rem;
    .tab-lv1 {
      position: relative;
    }
    .swiper-container {
      @include wah(8.55rem, 8.11rem, none);
    }
    .tab-lv2 {
      @include wah(8.55rem, 8.11rem, none);
      margin: 0 auto;
      overflow: scroll;
      overflow-x: hidden;
      h1 {
        @include flc(.8rem, 2rem, #fff, center);
      }
      .content {
        @include flc(.36rem, 2, #fff, left);
        p {
          text-indent: 2em;
          margin-bottom: .3rem;
          img {
            width: 100%;
          }
        }
      }
      /*邀请函样式*/
      .invitation {
        text-align: center;
        img {
          margin-top: .8rem;
          width: 80%;
        }
      }
      /*会议材料*/
      .paper-list {
        line-height: 1rem;
        text-decoration: underline;
        font-size: .58rem;
        line-height: 2;
      }
      /*报名表样式*/
      .entry-form {
        .line {
          position: relative;
          margin-bottom: .3rem;
          text-align: left;
          .item-des {
            @extend %palt;
            @include wah(1rem, 1rem, none);
            @include flc(.38rem, 1rem, #222, left);
            padding-left: .4rem;
          }
          .cl-btn {
            width: 5rem;
          }
        }
        .line-submit {
          text-align: center;
        }
        .cl-input {
          @include wah(8rem, 1rem, none);
          @include flc(.38rem, 1rem, #333, left);
          padding-left: 1.5rem;
        }
        .line-address {
          background: #fff;
          border-radius: .1rem;
          padding-left: 1.5rem;
          width: 6.5rem;
          height: .8rem;
          padding-top: .2rem;
          .cl-select {
            display: flex;
            flex-wrap: nowrap;
          }
          select, input[type=checkbox], input[type=radio] {
            display: block;
          }
          .layui-form-select {
            display: none;
            flex: 1;
            ul {
              top: 1rem;
              width: 3.2rem;
              left: -1rem;
            }
            li {
              @include flc(.32rem, 1.5, #444, left);
            }
          }
          .layui-input, .layui-textarea {
            height: .6rem;
          }
          .layui-form-select ul li.layui-this {
            background: #38C2DF;
          }
        }
      }
      /*签到样式*/
      .signIn {
        text-align: center;
        img {
          @include wah(7.4rem, 7.4rem, none);
        }
      }
      /*大转盘样式*/
      #Rotate {
        @include wah(8.55rem, auto, none);
        position: relative;
        #outerRotateWrap {
          margin: 0 auto;
          margin-top: .4rem;
          @include wah(5.49rem, 5.49rem, none);
          background: url('../images/ppr_home_bg4.png') center center no-repeat;
          background-size: 100%;
          #outerRotate {
            @include wah(5.49rem, 5.49rem, none);
            background: url('../images/ppr_home_bg2.png') center center no-repeat;
            background-size: 100%;
          }
        }
        #innerRotateWrap {
          @extend %palt;
          top: 2.0rem;
          left: 50%;
          margin-left: -.76rem;
          @include wah(1.52rem, 1.82rem, none);
          #innerRotate {
            @include wah(1.52rem, 1.82rem, none);
            background: url('../images/ppr_home_bg3.png') center center no-repeat;
            background-size: 100%;
          }
        }
      }
      #Shake {
        @include wah(8.55rem, auto, none);
        position: relative;
        #outerShakeWrap {
          margin: 0 auto;
          margin-top: .4rem;
          @include wah(6.49rem, 5.71rem, none);
          background: url('../images/ppr_home_bg6.png') center center no-repeat;
          background-size: 100%;
        }
        #innerShakeWrap {
          @extend %palt;
          top: 2.0rem;
          left: 50%;
          margin-left: -.96rem;
          @include wah(4.17rem, 3.24rem, none);
          #innerShake {
            @include wah(2.17rem, 3.24rem, none);
            background: url('../images/ppr_home_bg5.png') center center no-repeat;
            background-size: 100%;
          }
        }
      }
      /*摇一摇样式*/
      #Rotate, #Shake {
        h1 {
          @include flc(.48rem, 2, #fff, left);
        }
        @include flc(.32rem, 1.5, #fff, left);
        p {
          text-indent: 0;
        }
        .info {
          .s1 {
            color: #F8050F;
          }
          .s3 {
            color: #37C1DF;
          }
        }
        .detail {
          .line {
            @extend %clf;
          }
          .p1 {
            width: 2rem;
          }
          .p2 {
            width: 6rem;
          }
        }
      }
    }
  }
}

#view_userMeetingList, #view_userCollections {
  background: #EBEBEB;
  .wrap {
    margin-top: .4rem;
  }
  .line {
    position: relative;
    padding: .35rem .25rem;
    background: #fff;
    height: 1.52rem;
    border-bottom: 1px solid #ccc;
    .pic {
      height: atuo;
      &, img {
        @include wah(2.29rem, 1.52rem, none);
      }
    }
    dl {
      @include wah(7.6rem, 1.52rem, none);
      dt {
        @include flc(.48rem, 1rem, #333, left);
        height: 1rem;
        width: 6.4rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        /*设置不折行*/
      }
      dd {
        @include flc(.4rem, .6rem, #656565, left);
        overflow: hidden;
        .time {
          margin-right: .4rem;
        }
      }
    }
    .tag {
      @extend %part;
      top: .2rem;
      right: .2rem;
      &.red {
        color: #FD0A0A;
      }
      &.blue {
        color: #09A9EB;
      }
    }
  }
}

#view_userCollections {
  .line {
    height: auto;
    @extend %clf;
    /*    .pic{
      height: auto;
      p{
        width: 100%;
        background: #ccc;
        margin-top: .7rem;
        @include flc(.34rem,1.5 ,#666,center);
      }
    }*/
    dl {
      height: auto;
      dd {
        padding-bottom: .2rem;
        .time, .address {
          color: #F7551F;
        }
      }
    }
  }
}

#view_userHome {
  background: #EBEBEB;
  .line-info {
    @include wah(10.8rem, 2.28rem, none);
    background: url('../images/ppr_userHome_bg1.jpg') center center no-repeat;
    .avatar {
      &, img {
        @include wah(1.61rem, 1.61rem, left);
        border-radius: 50%;
      }
      margin-left:.6rem;
      margin-top: .4rem;
    }
    .username {
      float: left;
      @include flc(.36rem, 2.28rem, #fff, left);
      margin-left: .2rem;
    }
    .settinglink {
      margin-top: .9rem;
      float: right;
      margin-right: .4rem;
      .cl-btn {
        @include wah(2.55rem, .72rem, none);
        background: #38C2DF;
        @include flc(.36rem, .72rem, #fff, center);
      }
    }
  }
  .line-menu {
    display: flex;
    padding: .4rem .5rem;
    justify-content: space-between;
    .cl-btn {
      @include wah(4.56rem, .95rem, none);
      @include flc(.36rem, .95rem, #fff, center);
      background: #707375;
      &.on {
        background: #F75620;
      }
    }
  }
  .tab2 {
    display: none;
  }
  .line-news {
    position: relative;
    padding: .35rem .25rem;
    background: #fff;
    @extend %clf;
    border-bottom: 1px solid #ccc;
    .pic {
      height: 1.52rem;
      &, img {
        @include wah(2.29rem, 1.52rem, none);
      }
    }
    dl {
      @include wah(7.6rem, auto, none);
      dt {
        @include flc(.36rem, 1rem, #333, left);
      }
      dd {
        @include flc(.32rem, .6rem, #656565, left);
        overflow: hidden;
        .time {
          margin-right: .4rem;
        }
      }
    }
    .time {
      @extend %part;
      top: .2rem;
      right: .2rem;
      color: #656565;
    }
  }
}


/** 
 * 邀请函
 */

#view_invitation {
  background: url('../images/ppr_invitation_bg1.jpg') center center no-repeat;
  background-size: 100% auto;
  background-attachment: fixed;
  text-align: center;
  .logo img {
    @include wah(3.25rem, 3.5rem, none);
  }
  .title {
    @include flc(.8rem, 2, #fff, center);
  }
  .time-info {
    margin-top: .6rem;
    padding-left: 1.6rem;
    @include flc(.48rem, 1.5, #fff, left);
  }
  .subtitle {
    padding: 0 .8rem;
    margin-top: 1rem;
    @include flc(.32rem, 1.5, #fff, left);
  }
  .detail-info {
    margin-top: 1rem;
    padding: 0 .8rem;
    @include flc(.28rem, 1.5, #fff, left);
    .p1 {
      font-size: .6rem;
      margin-bottom: .4rem;
    }
  }
  .ani {
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
}

.shaking {
  animation: shaking infinite .5s;
}

@-webkit-keyframes shaking {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0);
  }
}
